28. Przechwytywanie zdarze±


    Przechwytywanie zdarze± jest jednym z ciekawszych aspekt≤w jΩzyka JavaScript. Pozwala na rozszerzon▒ obs│ugΩ zdarze±. Polega to na definiowaniu funkcji, kt≤re maj▒ zostaµ wywo│ane, kiedy dane zdarzenie bΩdzie mia│o miejsce. I tutaj zaczynaj▒ siΩ schody, poniewa┐ ta mo┐liwo╢µ jest niestety kolejnym przyk│adem, jak r≤┐ni siΩ interpretowanie skrypt≤w przez r≤┐ne przegl▒darki, a przede wszystkim Internet Explorer i Netscape Navigator. Z powodu tych r≤┐nic musimy praktycznie napisaµ nasz skrypt podw≤jnie. Zobaczmy prosty przyk│ad:

<SCRIPT LANGUAGE="JavaScript">
<!--

ie = (document.all) ? 1 : 0;
n = (document.layers) ? 1 : 0;

if (ie)
 document.onmousedown = napis;
else if (n)
 {
  window.captureEvents(EVENT.MOUSEDOWN);
  window.onmousedown = napis;
 }

function napis()
{
 alert("Nie klikaj prawym przyciskiem");
}

//-->
</SCRIPT>

Na samym pocz▒tku musimy wykryµ przegl▒darkΩ internetow▒ u┐ytkownika. Ka┐da ma swoje unikalne w│a╢ciwo╢ci, tote┐ sprawdzamy, czy przegl▒darka obs│uguje dan▒ i ju┐ wiemy, czy to jest ta przegl▒darka, czy inna. Tak▒ przyk│adow▒ w│a╢ciwo╢ci▒ dla Internet Explorer jest document.all, a dla Netscape Navigator - document.layers. Niestety s▒ to jedne z wielu, a przytoczy│em w│a╢nie te, poniewa┐ s▒ one u┐ywane zwyczajowo. W ca│ym procederze korzystamy z operatora () ? :. Dalej w zale┐no╢ci od przegl▒darki przechwytujemy zdarzenie podpinaj▒c pod nie wywo│anie funkcji napis. Da to taki efekt, ┐e przy ka┐dym klikniΩciu myszk▒ w dokument zostanie wy╢wietlone okienko dialogowe z komunikatem.

Teraz wzbogacimy nasz skrypt o detekcjΩ wci╢niΩtego przycisku myszy. Od tej pory komunikat bΩdzie siΩ wy╢wietla│ tylko po wci╢niΩciu prawego klawisza:

<SCRIPT LANGUAGE="JavaScript">
<!--

ie = (document.all) ? 1 : 0;
n = (document.layers) ? 1 : 0;

if (ie)
 document.onmousedown = napis;
else if (n)
 {
  window.captureEvents(EVENT.MOUSEDOWN);
  window.onmousedown = napis;
 }

function napis(e)
{
 if (ie && event.button == 2)
  {
   alert("Nie klikaj prawym przyciskiem");
   return(false);
  }
 if (n && e.which == 2)
  {
   alert("Nie klikaj prawym przyciskiem");
   return(false);   
  }
}

//-->
</SCRIPT>

W podobny spos≤b mo┐emy r≤wnie┐ sczytaµ wsp≤│rzΩdne kursora w oknie. Tutaj jednak wykorzystamy zdarzenie onMouseMove. Pobrane dane bΩdziemy wypisywaµ na formularzu - w obiektach text. Zobaczmy kod:

<SCRIPT LANGUAGE="JavaScript">
<!--

ie = (document.all) ? 1 : 0;
n = (document.layers) ? 1 : 0;

if (ie)
 document.onmousemove = wspolrzedne;
else if (n)
 {
  window.captureEvents(EVENT.MOUSEMOVE);
  window.onmousemove = wspolrzedne;
 }

function wspolrzedne(e)
{
 txt = document.formularz.pole_textowe;
 if (ie)
  {
   txt.value = "x: " + (document.body.scrollLeft + event.clientX)
 + "; y: " + (document.body.scrollTop + event.clientY);
   return(false);
  }
 if (n)
  {
   txt.value = "x: " + e.pageX + "; y: " + e.pageY;
   return(false);   
  }
}

//-->
</SCRIPT>

..i jeszcze formularz:

<FORM NAME="formularz">
 <INPUT TYPE="text" NAME="pole_textowe">
</FORM>

Efekt jest taki:

Widzimy, ┐e wsp≤│rzΩdne podawane s▒ od faktycznego naro┐nika dokumentu, a nie tylko od widocznej jego czΩ╢ci. Mo┐na to oczywi╢cie zmieniµ usuwaj▒c z kodu document.body.scrollLeft oraz document.body.scrollTop.